﻿@page "/chart-gallery"
<h3>Chart Gallery</h3>

@if (!initialized)
{
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(247, 247, 247); display: block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
            <g transform="rotate(180 50 50)">
                <rect x="15" y="15" width="10" height="40" fill="#ebebeb">
                    <animate attributeName="height" values="50;70;30;50" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" begin="-0.4s"></animate>
                </rect>
                <rect x="35" y="15" width="10" height="40" fill="#f0f0f0">
                    <animate attributeName="height" values="50;70;30;50" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" begin="-0.2s"></animate>
                </rect>
                <rect x="55" y="15" width="10" height="40" fill="#ebebeb">
                    <animate attributeName="height" values="50;70;30;50" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" begin="-0.6s"></animate>
                </rect>
                <rect x="75" y="15" width="10" height="40" fill="#f0f0f0">
                    <animate attributeName="height" values="50;70;30;50" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" begin="-1s"></animate>
                </rect>
            </g>
        </svg>
}
else
{

    <Row class="row-deck row-cards">
        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Line />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Bar />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Area />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <MixedChart />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Pie />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Donut />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <GaugeChart />
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <HeatMapChart />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.RadialBar />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.PolarArea />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Treemap />
            </ChartCard>
        </RowCol>


        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Scatter />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <CandlestickChart />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <BoxPlotChart />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <RangeBarChart />
            </ChartCard>
        </RowCol>

        <RowCol Lg=3 Sm=6 Xs=12>
            <ChartCard>
                <OrderChart PointType=SeriesType.Radar />
            </ChartCard>
        </RowCol>

        <RowCol Lg=4 Sm=12>
            <ChartCard>
                <BubbleChart />
            </ChartCard>
        </RowCol>

        <RowCol Lg=4 Sm=12>
            <ChartCard>
             <FunnelChartSample />
            </ChartCard>
        </RowCol>

        <RowCol Lg=4 Sm=12>
            <ChartCard>
               <RangeAreaChart />
            </ChartCard>
        </RowCol>
    </Row>
}
@code {
    private bool initialized;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await Task.Delay(40);
        initialized = true;
    }

}
